<!--
Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div>

    <style scoped>
@import "app/css/modal.css";

.graph, .empty-graph {
    border: 1px solid #ccc;
    width: auto;
    height: 7px;
    padding: 0;
    background: #f33;
}

.pass-bar {
    background: #1d4;
}

.pass-bar, .fail-bar {
    float: left;
    height: 100%;
}

div.box {
    border: 1px solid black;
    overflow-x: scroll;
}
</style>

    <div ng-show="showTestSuitesResults">
        <h2 class="heading-small"></h2>
        <h1 class="heading-page">Display Test Suites Results</h1>

        <h2 class="heading-small"></h2>
        <div>
            <h2 class="heading-small">Select a blueprint layer:</h2>
            <div>
                <select ng-model="selectedLayer"
                    ng-init="resultsLayers[0]"
                    ng-change="selectedResultsLayerChange(selectedLayer)"
                    ng-options="n for n in resultsLayers">
                </select>
            </div>

            <h2 class="heading-small">Select a test suite of the
                selected layer in order to be displayed:</h2>
            <div>
                <select ng-model="selectedTestSuiteName"
                    ng-init="resultsLayerTestSuitesNames[0]"
                    ng-change="selectedTestSuitesNameChange(selectedTestSuiteName)"
                    ng-options="n for n in resultsLayerTestSuitesNames">
                </select>
            </div>
        </div>

        <br> <br> <br>

        <div ng-hide="!selectedLayer || !selectedTestSuiteName">
            <div>
                <h2 class="heading-small"></h2>
                <div class="box">
                    <h3 class="heading-small">
                        <u>General Info</u>
                    </h3>
                    <p></p>

                    <p></p>
                    <p>Name: {{selectedRobotTestResult.name}}</p>
                    <p>Generated:
                        {{selectedRobotTestResult.robot.generated}}</p>
                    <p>Generator:
                        {{selectedRobotTestResult.robot.generator}}</p>
                    <p>Errors:
                        {{selectedRobotTestResult.robot.errors}}</p>

                    <h2 class="heading-small"></h2>
                    <h3 class="heading-small">
                        <u>Test Statistics</u>
                    </h3>
                    <p></p>
                    <table class="striped" cellspacing="0"
                        cellpadding="10">
                        <caption>
                            <h3></h3>
                        </caption>
                        <thead>
                            <th>
                                <p>&nbsp;Total statistics&nbsp;</p>
                            </th>
                            <th>
                                <p>Total&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass&nbsp;</p>
                            </th>
                            <th>
                                <p>Fail&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass / Fail&nbsp;</p>
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="stat in selectedRobotTestResult.robot.statistics.total.stat">
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.content }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    (stat.fail * 1) + (stat.pass*1) }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.pass }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.fail}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">
                                    <div class="graph">
                                        <div class="pass-bar"
                                            ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="100%"></div>
                                        <div class="fail-bar"
                                            ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="0%"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <br>

                    <h3 class="heading-small"></h3>
                    <table class="striped" cellspacing="0"
                        cellpadding="10">
                        <caption>
                            <h3></h3>
                        </caption>
                        <thead>
                            <th>
                                <p>&nbsp;Statistics by Tag&nbsp;</p>
                            </th>
                            <th>
                                <p>Total&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass&nbsp;</p>
                            </th>
                            <th>
                                <p>Fail&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass / Fail&nbsp;</p>
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="stat in selectedRobotTestResult.robot.statistics.tag.stat">
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.content }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    (stat.fail * 1) + (stat.pass*1) }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.pass }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.fail}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">
                                    <div class="graph">
                                        <div class="pass-bar"
                                            ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="100%"></div>
                                        <div class="fail-bar"
                                            ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="0%"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <br>

                    <h3 class="heading-small"></h3>
                    <table class="striped" cellspacing="0"
                        cellpadding="10">
                        <caption>
                            <h3></h3>
                        </caption>
                        <thead>
                            <th>
                                <p>&nbsp;Statistics by Suite&nbsp;</p>
                            </th>
                            <th>
                                <p>Total&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass&nbsp;</p>
                            </th>
                            <th>
                                <p>Fail&nbsp;</p>
                            </th>
                            <th>
                                <p>Pass / Fail&nbsp;</p>
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="stat in selectedRobotTestResult.robot.statistics.suite.stat">
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.content }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    (stat.fail * 1) + (stat.pass*1) }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.pass }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    stat.fail}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">
                                    <div class="graph">
                                        <div class="pass-bar"
                                            ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="100%"></div>
                                        <div class="fail-bar"
                                            ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
                                            title="0%"></div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h2 class="heading-small"></h2>
                <div class="box">
                    <h3 class="heading-small">
                        <a href="javascript:void(0);"
                            ng-click="showDetailsLog = ! showDetailsLog">Test
                            Execution Log</a>
                    </h3>
                    <div ng-show="showDetailsLog">
                        <p></p>
                        <p>Root Suite Full Name:
                            {{selectedRobotTestResult.robot.suite.name}}</p>
                        <p>Source:
                            {{selectedRobotTestResult.robot.suite.source}}</p>
                        <p>Status:
                            {{selectedRobotTestResult.robot.suite.status.status}}</p>
                        <p>Start time:
                            {{selectedRobotTestResult.robot.suite.status.starttime}}</p>
                        <p>End time:
                            {{selectedRobotTestResult.robot.suite.status.endtime}}</p>

                        <h2 class="heading-small"></h2>
                        <p></p>
                        <p>Sub-suite Full Name:
                            {{selectedRobotTestResult.robot.suite.suite.name}}</p>
                        <p>Documentation:
                            {{selectedRobotTestResult.robot.suite.suite.doc}}</p>
                        <p>Source:
                            {{selectedRobotTestResult.robot.suite.suite.source}}</p>
                        <p>Status:
                            {{selectedRobotTestResult.robot.suite.suite.status.status}}</p>
                        <p>Start time:
                            {{selectedRobotTestResult.robot.suite.suite.status.starttime}}</p>
                        <p>End time:
                            {{selectedRobotTestResult.robot.suite.suite.status.endtime}}</p>
                    </div>
                </div>

                <h2 class="heading-small"></h2>
                <div class="box">
                    <ul>
                        <h4 class="heading-small">Sub-suite Robot
                            keywords</h4>
                        <li
                            ng-repeat="kw in selectedRobotTestResult.robot.suite.suite.kw"
                            ng-include="'kwVal'"></li>
                    </ul>
                </div>

                <h2 class="heading-small"></h2>
                <div class="box">
                    <h3 class="heading-small">Test Cases</h3>
                    <table class="striped" cellspacing="0"
                        cellpadding="10">
                        <caption>
                            <h3></h3>
                        </caption>
                        <thead>
                            <th>
                                <p>&nbsp;Full Name&nbsp;</p>
                            </th>
                            <th>
                                <p>Documentation&nbsp;</p>
                            </th>
                            <th>
                                <p>Status&nbsp;</p>
                            </th>
                            <th>
                                <p>Start Time&nbsp;</p>
                            </th>
                            <th>
                                <p>End Time&nbsp;</p>
                            </th>
                            <th>
                                <p>Critical&nbsp;</p>
                            </th>
                            <th>
                                <p>Message&nbsp;</p>
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr
                                ng-repeat="test in selectedRobotTestResult.robot.suite.suite.test"
                                ng-class="{selected:test.id == selectedTestId}"
                                ng-click="setClickedTest(test)">
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{
                                    test.name }}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.doc}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.status}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.starttime}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.endtime}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.critical}}</td>
                                <td
                                    style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.content}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <h2 class="heading-small"></h2>
                <div class="box">
                    <ul>
                        <h4 class="heading-small">Robot keywords of
                            the selected test case</h4>
                        <li ng-repeat="kw in selectedTest.kw"
                            ng-include="'kwVal3'"></li>
                    </ul>
                </div>

            </div>
        </div>

        <script type="text/ng-template" id="kwVal">
<h2 class="heading-small"></h2>
                        <h4>
                            <a href="javascript:void(0);" ng-click="showDetails = ! showDetails">
                                {{kw.name}} (Nested depth: {{$depth = $parent.$depth && $parent.$depth + 1 || 1}})</a>
                        </h4>
                        <div ng-show="showDetails" ng-style="{'margin-left': 50*$depth+'px'}">
                            <p>Type: <i>
                                {{kw.type}}</i></p>
                            <p>Library: <i>
                                {{kw.library}}</i></p>
                            <p>Documentation: <i> {{kw.doc}}</i></p>
                            <p>Start time:
                                <i>{{kw.status.starttime}}</i></p>
                            <p>End time:
                                <i>{{kw.status.endtime}}</i></p>
                            <p>Status:
                                <i>{{kw.status.status}}</i></p>
                            <p ng-if="kw.arguments">Arguments:
                                <ul>
                                    <li ng-repeat="arg in kw.arguments.arg">&emsp;&emsp;&emsp;&emsp;<i>{{arg}}</i></li>
                                </ul>
                            </p>
                            <p ng-if="kw.msg">Message:
                                <i>{{kw.msg.content}}</i></p>
                            <p></p>
                            <p ng-if="kw.kw">Used Robot keywords:</p>
   <ul ng-if="kw.kw">
    <li ng-repeat="kw in kw.kw" ng-include="'kwVal'"></li>
  </ul>
</script>

        <script type="text/ng-template" id="kwVal3">
<h2 class="heading-small"></h2>
                        <h4>
                            <a href="javascript:void(0);" ng-click="showDetails4 = ! showDetails4">
                                {{kw.name}} (Nested depth: {{$depth = $parent.$depth && $parent.$depth + 1 || 1}})</a>
                        </h4>
                        <div ng-show="showDetails4" ng-style="{'margin-left': 50*$depth+'px'}">
                            <p>Type: <i>
                                {{kw.type}}</i></p>
                            <p>Library: <i>
                                {{kw.library}}</i></p>
                            <p>Documentation: <i> {{kw.doc}}</i></p>
                            <p>Start time:
                                <i>{{kw.status.starttime}}</i></p>
                            <p>End time:
                                <i>{{kw.status.endtime}}</i></p>
                            <p>Status:
                                <i>{{kw.status.status}}</i></p>
                            <p ng-if="kw.arguments">Arguments:
                                <ul>
                                    <li ng-repeat="arg in kw.arguments.arg">&emsp;&emsp;&emsp;&emsp;<i>{{arg}}</i></li>
                                </ul>
                            </p>
                            <p ng-if="kw.msg">Message:
                                <i>{{kw.msg.content}}</i></p>
                            <p></p>
                            <p ng-if="kw.kw">Used Robot keywords:</p>
   <ul ng-if="kw.kw">
    <li ng-repeat="kw in kw.kw" ng-include="'kwVal3'"></li>
  </ul>
</script>
    </div>
</div>